<template>
    <div class="default-main2 ba-table-box" style="margin-top: 10px;">
        <el-card style="width:98%;float: left;margin-left: 1%;">
            <template #header>
            <div class="card-header">
                <h2>统计结果</h2>
            </div>
            </template>
            
            <el-row :gutter="20">
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel user-reg suspension">
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <Icon color="#9933FF" size="20" name="fa fa-shopping-cart" />
                                    <span id="user_reg_number" style="color:#9933FF">{{ tong.order_sum??0 }}</span>
                                    <div class="content-right">订单数量</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel file suspension">
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <Icon color="#FF33CC" size="20" name="fa fa-money" />
                                    <span id="file_number2" style="color:#FF33CC"><b>$</b>{{ tong.order_sum_money??0 }}</span>
                                    <div class="content-right">订单金额</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                     
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel addons suspension">
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <Icon color="#00CC00" size="20" name="fa fa-users" />
                                    <span id="addons_number" style="color:#00CC00">{{ tong.user_sum_pay??0 }}</span>
                                    <div class="content-right">付款总人数</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel user-reg suspension">
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <Icon color="#CCCC00" size="20" name="fa fa-user" />
                                    <span id="user_reg_number" style="color:#CCCC00">{{ tong.user_sum  ?? 0}}</span>
                                    <div class="content-right">总用户</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel file suspension">
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <Icon color="#FF9900" size="20" name="fa fa-paper-plane" />
                                    <span id="file_number" style="color:#FF9900">{{ tong.order_daifa??0 }}</span>
                                    <div class="content-right">待发货订单</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel file suspension">
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <Icon color="#FF9900" size="20" name="fa fa-check-circle" />
                                    <span id="file_number" style="color:#FF9900">{{ tong.order_success??0 }}</span>
                                    <div class="content-right">交易完成订单</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel users suspension">
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <Icon color="#009999" size="20" name="fa fa-exchange" />
                                    <span id="users_number" style="color:#009999">{{ tong.order_tui??0 }}</span>
                                    <div class="content-right">申请退款订单</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel addons suspension">
                            <div class="small-panel-content">
                                <div class="content-left">
                                    <Icon color="#996600" size="20" name="fa fa-bar-chart" />
                                    <span ref="myDiv" id="addons_number" style="color:#996600;" :class="{ 'firstClass': true, 'secondClass': isWidthExceeded }">{{ tong.order_tuied ?? 0 }}</span>
                                    <div class="content-right">已退款订单</div>
                                </div>

                            </div>
                        </div>
                    </el-col>

                </el-row>

            
        </el-card>

        <el-card style="width:98%;float: left;margin-left: 1%;margin-top: 15px;">
            <template #header>
            <div class="card-header">
                <h2>近15日销售情况</h2>
            </div>
            </template>
            <div id='showorders_sale' style='width:100%; height:300px'></div>
            
        </el-card>


        <el-card style="width: 48.5%;float: left;margin-left: 1%;margin-top: 15px;">
            <template #header>
            <div class="card-header">
                <h2>月份销售统计</h2>
            </div>
            </template>
            <div id='showorders_month' style='width:100%; height:300px'></div>
        </el-card>

        <el-card style="width: 48.5%;float: left;margin-left: 1%;margin-top: 15px;">
            <template #header>
            <div class="card-header">
                <h2>订单状态统计</h2>
            </div>
            </template>
            <div id='showorders_os' style='width:100%; height:300px'></div>
            
        </el-card>




    </div>
</template>

<script setup lang="ts">
import { ref, provide,onMounted,nextTick} from 'vue'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import * as echarts from 'echarts'
import createAxios from "/@/utils/axios";
defineOptions({
    name: 'statics/rank',
})

const { t } = useI18n()
const data = ref([])
const tong = ref([])
onMounted(() => {

    return createAxios({
        url: '/admin/order.Order/getOrderStatics',
        method: 'get',
    }).then(res => {
        nextTick(() => {
            chart_sales(res.data.latest_day)
            chart_sales_month(res.data.order_sales)
            chart_sales_os(res.data.order_sales)
            tong.value = res.data.tong
        })
    }).catch(err => {

    })


})

const chart_sales = (v=[])=> {
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('showorders_sale');
    var myChart = echarts.init(chartDom);
    // 指定图表的配置项和数据
    var option;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['订单量', '订单额']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: v.date,
            //设置字体倾斜
            axisLabel: {
                interval: 0,
                rotate: 0,
                //倾斜度 -90 至 90 默认为0
                // margin: 9,
                textStyle: {
                    color: "#666",
                    size:"10px"
                }
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
 
            {
                name: '订单金额',
                type: 'line',
                stack: 'Total',
                data:v.money
            }
        ]
    };


    option && myChart.setOption(option);
}

//按月统计
const chart_sales_month = (v=[])=> {
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('showorders_month');
    var myChart = echarts.init(chartDom);
    // 指定图表的配置项和数据
    var option;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['销售额']
        },
        xAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [120, 200, 150, 80, 70, 110, 130,133,234,345,678,876],
            type: 'bar',
            name:'销售额'
            }
        ]
    };


    option && myChart.setOption(option);
}

//按月统计
const chart_sales_os = (v=[])=> {
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('showorders_os');
    var myChart = echarts.init(chartDom);
    // 指定图表的配置项和数据
    var option;
    option = {
            // title: {
            //     text: 'Referer of a Website',
            //     subtext: 'Fake Data',
            //     left: 'center'
            // },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '待付款' },
                    { value: 735, name: '待发货' },
                    { value: 580, name: '待收货' },
                    { value: 484, name: '申请退款' },
                    { value: 300, name: '已退款' },
                    { value: 1300, name: '已完成' }
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
    };


    option && myChart.setOption(option);
}


</script>

<style scoped lang="scss">
.table{
     border:1px solid #eee;
     width: 100%;
     border-collapse: collapse; /* 合并边框，消除间隙 */
}
.table th{
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}
.table td{
    border: 1px solid #eee;
    padding: 10px;
}
.table tr .bg{
    background-color: #f5f7fa;
    font-weight: bold;
    text-align: justify;
}
.table tr .tc{
    text-align: center;
}
.table tr .yuan{
    background-color: #ccc;
    width: 22px ;
    height: 22px;
    display: block;
    text-align: center;
    border-radius: 100%;
    color:#fff;
    font-size: 11px;
    line-height: 22px;
    margin: 0 auto;
}
.table tr .yuan0{
    background-color: #99CC33;
}
.table tr .yuan1{
    background-color: #FF6666;
}
.table tr .yuan2{
    background-color: #FF9900;
}
.small-panel {
    // background-color: #e9edf2;
    background-color: #f4f4f4;
    border-radius: var(--el-border-radius-base);
    padding:10px;
    margin-bottom: 20px;

    .small-panel-title {
        color: #92969a;
        font-size: 15px;
    }

    .small-panel-content {
        display: flex;
        align-items: flex-end;
        margin-top: 0px;
        color: #2c3f5d;

        .content-left {
            font-size: 20px;

            .icon {
                margin-right: 10px;
            }

            span {
                display: inline-block;
                font-size: 18px;
            }
            b{
                font-size: 10px;
            }
        }

        .content-right {
            font-size: 14px;
            margin-left: auto;
        }

        .color-success {
            color: var(--el-color-success);
        }

        .color-warning {
            color: var(--el-color-warning);
        }

        .color-danger {
            color: var(--el-color-danger);
        }

        .color-info {
            color: var(--el-text-color-secondary);
        }
    }
}
</style>
